<template>
    <!-- <div class="top_bar">
        <div class="logo"><img src="https://bu.dusays.com/2024/09/28/66f7782a0e175.png" alt=""></div>
        <div class="search">
            <el-input v-model="search_input" placeholder="热门商品" :prefix-icon="Search" />
            <div class="search_btn">
                <v-btn style="color: white;" class="search_btn_v" :ripple="false" height="4vh" min-width="10vh">
                    搜索
                </v-btn>
            </div>
        </div>
    </div> -->
    <TopBar></TopBar>
    <div class="select_bar">
        <v-btn href="/user" variant="text">首页</v-btn>
        <v-btn @click="goRoom()" variant="text">店铺</v-btn>
    </div>
    <div class="body">
        <div class="one_box">
            <div class="store-container">
                <main>
                    <div class="product-grid">
                        <div v-for="product in products" :key="product.itemID" class="product-card">
                            <img :src="`https://zizi-1325809325.cos.ap-guangzhou.myqcloud.com/商品列表/List/${product.itemImg}.jpg`"
                                :alt="product.name" />
                            <div class="product-info">
                                <h2>{{ product.itemName }}</h2>
                                <p>¥{{ product.itemPrice }}</p>
                            </div>
                        </div>
                    </div>
                </main>
            </div>


        </div>
        <div class="two_box">

        </div>
        <div class="three_box">
          <h3>热门行情</h3>
          <el-select v-model="selectedProvince" filterable placeholder="请选择省份" @change="handleProvinceChange">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>


<!--          &lt;!&ndash; 渲染商品行情表格 &ndash;&gt;-->
<!--          <el-table class="market_hot" :data="data.tableData" stripe style="width: 84%;margin: auto;">-->
<!--            <el-table-column prop="marketName" label="品类" width="700">-->
<!--              <template #default="scope">-->
<!--                <v-avatar class="img_avatar" style="margin-right: 1vh;" :image="scope.row.marketAvatar" size="25"></v-avatar>-->
<!--                <span>{{ scope.row.marketName }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="marketArea" label="地区" width="500" />-->
<!--            <el-table-column prop="marketPrice" label="价格">-->
<!--              <template #default="scope">-->
<!--                <span>{{ scope.row.marketPrice }}{{ scope.row.marketTag }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="marketSituation" label="行情">-->
<!--              <template #default="scope">-->
<!--                <el-tag :type="scope.row.marketSituation === '平稳' ? 'success' :-->
<!--                     scope.row.marketSituation === '上涨' ? 'warning' :-->
<!--                     scope.row.marketSituation === '滞销' ? 'danger' : 'info'" effect="dark">-->
<!--                  {{ scope.row.marketSituation }}-->
<!--                </el-tag>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
          <div v-if="data.tableData.length > 0">
            <el-table class="market_hot" :data="data.tableData" stripe style="width: 84%;margin: auto; ">
              <el-table-column prop="marketName" label="品类" width="300">
                <template #default=scope>
                  <v-avatar class="img_avatar" style="margin-right: 1vh;" :image="scope.row.marketAvatar" size="25"></v-avatar>
                  <span>{{ scope.row.marketName }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="marketArea" label="地区" width="300" >

              </el-table-column>
              <el-table-column prop="marketPrice" label="价格">
                <template #default="scope">
                  <span>{{ scope.row.marketPrice }}{{ scope.row.marketTag }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="marketSituation" label="行情">
                <template #default="scope">
                  <el-tag :type="scope.row.marketSituation === '平稳' ? 'success' :
                scope.row.marketSituation === '上涨' ? 'warning' :
                  scope.row.marketSituation === '滞销' ? 'danger' : 'info'" effect="dark">
                    {{ scope.row.marketSituation }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-else>
            <p>没有找到该省份的市场数据。</p>
          </div>
        </div>
    </div>

    <Footer></Footer>
</template>
<script setup>
import TopBar from '@/component/TopBar.vue'
import Footer from '@/component/Footer.vue'
import { Calendar, Search } from '@element-plus/icons-vue';
import { ElMessage } from "element-plus";
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import router from '../../router/index.js'
import { ref, computed } from 'vue'
import request from '../../utils/request';
import { reactive } from "vue";
import { ElNotification } from 'element-plus'

const products = ref([])

const searchQuery = ref('')
const currentPage = ref(1)
const itemsPerPage = 8

const options = [
  { value: '北京', label: '北京' },
  { value: '天津', label: '天津' },
  { value: '上海', label: '上海' },
  { value: '重庆', label: '重庆' },
  { value: '河北', label: '河北' },
  { value: '河南', label: '河南' },
  { value: '云南', label: '云南' },
  { value: '辽宁', label: '辽宁' },
  { value: '黑龙江', label: '黑龙江' },
  { value: '湖南', label: '湖南' },
  { value: '安徽', label: '安徽' },
  { value: '山东', label: '山东' },
  { value: '新疆', label: '新疆' },
  { value: '江苏', label: '江苏' },
  { value: '浙江', label: '浙江' },
  { value: '江西', label: '江西' },
  { value: '湖北', label: '湖北' },
  { value: '广西', label: '广西' },
  { value: '广东', label: '广东' },
  { value: '甘肃', label: '甘肃' },
  { value: '福建', label: '福建' },
  { value: '四川', label: '四川' },
  { value: '贵州', label: '贵州' },
  { value: '陕西', label: '陕西' },
  { value: '宁夏', label: '宁夏' },
  { value: '海南', label: '海南' },
  { value: '青海', label: '青海' },
  { value: '西藏', label: '西藏' },
  { value: '澳门', label: '澳门' },
  { value: '香港', label: '香港' },
  { value: '台湾', label: '台湾' }
];


//获取本地用户
const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
  tableData: []
})

const load=()=>{
  request.get('user/selectMarketHot').then(res => {
    data.tableData = res.data;
    console.log("data",data.tableData);
  })
}

const markets = ref([]); // 用于存储获取的市场行情数据


// 省份选择变化时触发的事件
const handleProvinceChange = async (province) => {
  if (province) {
    try {
      // 调用后端接口获取对应省份的市场数据
      const response = await request.get('/user/getMarketsByProvince', {
        params: { province }
      });

      // 将接口返回的市场数据存储到 tableData 中
      data.tableData = response.data || [];  // 假设接口返回的结构是 { data: [...] }
      const market= data.tableData;

      console.log("market",market);
      // 在这里进行合并操作
      market.forEach(market => {
        market.marketArea = `${market.province}${market.city}${market.district}`;
      });
      console.log("market",market);


      if (data.tableData.length === 0) {
        console.log('没有找到对应的市场行情');
      }
    } catch (error) {
      console.error('请求失败:', error);
    }
  }
};
onMounted(() => {
  load();
})
</script>
<style scoped>
.top_bar {
    width: 100%;
    height: 10vh;
    /* background-color: wheat; */
    display: flex;
}

.top_bar img {
    width: 20vh;
    height: auto;
    margin-left: 20vh;
}


.top_bar .search {
    width: 50vh;
    margin: auto;
    margin-left: 0vh;
    display: flex;
}

.search .search_btn_v {
    background-color: green;
    font-size: 1.8vh;
    font-weight: bold;
}


.body {
    display: flex;
    flex-wrap: wrap;
    background-color: #E8E8E8;
}

.select_bar {
    background-color: green;
    color: white;
    width: 80%;
    margin: auto;
}

.one_box {
    background-color: white;
    width: 80%;
    height: auto;
    margin: auto;
}




.two_box {
    background-color: white;
    width: 80%;
    height: auto;
    margin: auto;
    margin-top: 2vh;
}

.image-container {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
    padding: 0.5vh;
}

.three_box {
    background-color: red;
    width: 80%;
    height: 60vh;
    margin: auto;
    margin-top: 2vh;
}

.store-container {
    font-family: Arial, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

header {
    background-color: #f8f8f8;
    padding: 20px;
    margin-bottom: 20px;
}

h1 {
    margin: 0;
    color: #333;
}

.search-bar {
    margin-bottom: 20px;
}

.search-bar input {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.product-card {
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
    transition: box-shadow 0.3s ease;
}

.product-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-info {
    padding: 15px;
}

.product-info h2 {
    margin: 0 0 10px;
    font-size: 18px;
    color: #333;
}

.product-info p {
    margin: 0 0 15px;
    color: #666;
}

.product-info button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.product-info button:hover {
    background-color: #45a049;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

/* 热门行情 */

.market_hot {
  border-radius: 5px;
}
</style>